<template>
	<!-- 音频 -->
	<view class="openAudio-box" :style="{ width:`${90+item.msgLength*5}rpx` }" @click="getVoice">
		<!-- <u-image :show-loading="false" width="31rpx" height="40rpx" :src="src"></u-image> -->
		<view class="voice-action">
			<view class="voice-box">
				<image class="voice-action-icon" :src="src"></image>
			</view>
		</view>
		<text v-if="item.msgLength>0" class="duration">{{item.msgLength + '"'}}</text>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		getVoiceApi
	} from "@/api/im.js";

	export default {
		components: {

		},
		props: {
			item: Object,
			index: Number,

		},
		data() {
			return {
				innerAudioContext: null,
				audioPlaying: false,
				duration: 0
			}
		},
		computed: {
			src() {
				// https://cdn.osisx.com/images/play.gif
				return this.audioPlaying ?
					'https://cdn.osisx.com/common/dongtu.gif' :
					'https://cdn.osisx.com/4a9b62d4e648d1b12bfbef24977042e4/image/e79f7d3170c24356b95e12b22074206a.png'
			},
		},
		mounted() {
			this.audioOn(this.onPlayAudio)
			// this.initAudio()
		},
		// 组件销毁
		destroyed() {
			this.audioOff(this.onPlayAudio)
			// 销毁音频
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy()
				this.innerAudioContext = null
			}
		},
		methods: {
			...mapActions(['audioOn', 'audioEmit', 'audioOff']),

			// 监听播放音频全局事件
			onPlayAudio(index) {
				if (this.innerAudioContext) {
					if (this.index !== index) {
						this.innerAudioContext.stop()
					}
				}
			},
			async getVoice() {
				this.audioPlaying = true
				return

				if (this.innerAudioContext) {
					this.openAudio()
				} else {
					await getVoiceApi(this.item.id).then((res) => {
						if (res.data.success) {
							let base64Data = res.data.result[0].audio
							this.initAudio(base64Data)
						}
					});
					this.openAudio()
				}

			},
			/**
			 * @desc 初始化音频实例
			 */
			initAudio(base64Data) {
				console.log('initAudio')
				this.innerAudioContext = uni.createInnerAudioContext();

				// 将Base64数据转换为ArrayBuffer
				let arrayBuffer = uni.base64ToArrayBuffer(base64Data);



				// 示例：写入文件
				let fsm = uni.getFileSystemManager();
				let userDataPath = uni.env.USER_DATA_PATH;
				let filePath = `${userDataPath}/audio_file${Math.random()}.mp3`; // 指定文件路径，根据实际情况调整

				// 将Blob数据写入文件
				fsm.writeFileSync(filePath, arrayBuffer, 'binary');


				// 设置音频文件路径
				this.innerAudioContext.src = filePath;
				this.innerAudioContext.obeyMuteSwitch = false;
				this.innerAudioContext.sessionCategory = 'playback';

				this.innerAudioContext.onCanplay(() => {
					// setTimeout(() => {
					// 	if (this.innerAudioContext.duration > 0) {
					// 		let duration = this.innerAudioContext.duration.toFixed(0);
					// 		this.$set(this, 'duration', duration > 60 ? 60 : duration);
					// 	} else {
					// 		// 如果第一次获取失败，可以再设置一个稍长一点的 setTimeout 尝试获取
					// 		setTimeout(() => {
					// 			let duration = this.innerAudioContext.duration.toFixed(0);
					// 			if (duration > 0) {
					// 				this.$set(this, 'duration', duration > 60 ? 60 : duration);
					// 			}
					// 		}, 300); // 延迟更长时间后再次尝试获取时长
					// 	}
					// }, 100); // 初始延迟100ms尝试获取时长
				});


				this.innerAudioContext.onPlay(() => {
					this.audioPlaying = true;
					console.log('onPlay')
				});

				this.innerAudioContext.onTimeUpdate(() => {
					// console.log('onTimeUpdate')
				});

				this.innerAudioContext.onWaiting(() => {
					console.log('onWaiting')
				});

				this.innerAudioContext.onPause(() => {
					this.audioPlaying = false;

					console.log('onPause')
				});

				this.innerAudioContext.onStop(() => {
					this.audioPlaying = false;
					console.log('onStop')
				});

				this.innerAudioContext.onEnded(() => {
					this.audioPlaying = false;
					console.log('onEnded')
				});

				this.innerAudioContext.onError(() => {
					this.audioPlaying = false;
					console.log('onError')
				});


			},
			// // 播放音频
			openAudio() {
				console.log('openAudio')
				// 通知停止其他音频
				this.audioEmit(this.index)

				if (this.audioPlaying) {
					this.innerAudioContext.stop();
				} else {
					this.innerAudioContext.play();
				}
			}




		}
	}
</script>

<style lang="scss" scoped>
	.openAudio-box {
		display: flex;
		align-items: center;
		// width: 390rpx; //300rpx 60s 1s=5rpx
		height: 45rpx;

		.duration {
			margin-left: 28rpx;
		}

		.voice-action {
			width: 32rpx;
			height: 40rpx;


			.voice-box {
				width: 100%;
				height: 40rpx;
				border-top-right-radius: 12rpx;
				border-bottom-right-radius: 12rpx;
				// background-color: pink;
				overflow: hidden;
				// animation: voiceShow 1.2s ease-in-out infinite;
			}

			@keyframes voiceShow {
				0% {
					width: 25%;
				}

				50% {
					width: 60%;
				}

				100% {
					width: 100%;
				}
			}
		}

		.voice-action-icon {
			width: 32rpx;
			height: 40rpx;
		}
	}
</style>